<!-- 骨架屏组件 -->
<template>
  <view class="skeleton-container">
    <!-- 分类标签骨架屏 -->
    <view class="skeleton-tabs" v-if="showTabs">
      <view 
        v-for="i in 5" 
        :key="i" 
        class="skeleton-tab"
      ></view>
    </view>
    
    <!-- 新闻列表骨架屏 -->
    <view class="skeleton-list">
      <view 
        v-for="i in count" 
        :key="i" 
        class="skeleton-item"
      >
        <!-- 封面骨架 -->
        <view class="skeleton-cover"></view>
        
        <!-- 内容骨架 -->
        <view class="skeleton-content">
          <view class="skeleton-title"></view>
          <view class="skeleton-summary">
            <view class="skeleton-line"></view>
            <view class="skeleton-line short"></view>
          </view>
          <view class="skeleton-meta"></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  defineProps({
    count: {
      type: Number,
      default: 5
    },
    showTabs: {
      type: Boolean,
      default: true
    }
  });
</script>

<style lang="scss" scoped>
.skeleton-container {
  padding: 20rpx;
}

.skeleton-tabs {
  display: flex;
  gap: 20rpx;
  margin-bottom: 30rpx;
  padding: 20rpx 0;
}

.skeleton-tab {
  width: 120rpx;
  height: 60rpx;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 30rpx;
}

.skeleton-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.skeleton-item {
  display: flex;
  background: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.skeleton-cover {
  width: 200rpx;
  height: 140rpx;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 12rpx;
  margin-right: 20rpx;
  flex-shrink: 0;
}

.skeleton-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.skeleton-title {
  height: 40rpx;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 4rpx;
  width: 80%;
}

.skeleton-summary {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.skeleton-line {
  height: 28rpx;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 4rpx;
  
  &.short {
    width: 60%;
  }
}

.skeleton-meta {
  height: 24rpx;
  width: 40%;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 4rpx;
  margin-top: auto;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
</style>

